<template>
  <div class="login-container">
    <van-nav-bar
      fixed
      title="登录"
    >

      <!-- <template #left>
                <van-icon name="cross" />
            </template> -->

      <van-icon
        slot='left'
        name="cross"
      />

    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="pattern"
        placeholder="请填写手机号"
        :rules="rules.mobile"
      >
        <i
          slot='left-icon'
          class="iconfont icon-shouji"
        ></i>

      </van-field>

      <van-field
        v-model="user.code"
        type="text"
        name="code"
        placeholder="请填写验证码"
        :rules="rules.code"
      >
        <i
          slot='left-icon'
          class="iconfont icon-yanzhengma"
        ></i>

        <template #button>
          <van-button
            @click="getCode"
            v-if='flag'
            size="small"
            type="primary"
          >发送验证码</van-button>
          <van-count-down
            @finish='finish'
            v-else
            :time="time"
            format="ss s"
          />

        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button
          block
          type="info"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
           
<script>
import { loginApi, codeApi } from '@/api'


import  {tt}  from  '@/utlis/storage'


export default {
  data() {
    return {
      user: {
        mobile: '13911111111',
        code: '246810'
      },

      time: 5 * 1000,
      flag: true,

      /* 校验 */

      rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /\d{11}/, message: '请填写手机号2222222' }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /\d{6}/, message: '请填写验证码222222' }
        ]
      }
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
      this.login()
    },

    async login() {
      try {
        const { data: res } = await loginApi(this.user)
        //console.log(res, 6666)

        /* 
        1、将登陆后信息存储起来
          + 将数据存储到vuex中
          +  触发vuex中mutations中的函数  
          +  将获取的信息赋值给state中 的user  并且做本地缓存
          +  对state中的user的值从本地缓存中获取
        */
        this.$store.commit('setUser', res.data)

        //console.log(this, 55555)
        //  this.$toast('登录成功')

        tt('登录成功')

        this.$router.push('/my')

       
      } catch (err) {
        console.log(err)
      }
    },

    /* 监听时间结束 */
    finish() {
      console.log(123)
      this.flag = true
    },
    async getCode() {
      /* 点击获取验证码按钮
        1、将状态值改变
        2、发送请求 
        
        */
      this.flag = false

      const { data: res } = await codeApi(this.user.mobile)
      console.log(res, 7777)
    }
  }
}
</script>
<style scoped lang='less'>
.login-container {
  padding-top: 100px;
  .van-nav-bar {
    background-color: #3296fa;
    .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
}
</style>